<template>
    <div class="booox">
        <!-- 顶部 -->
        <header class="hhheader">
            <van-nav-bar title="线上药房" left-arrow @click-left="onClickLeft">
                <template #right>
                    <svg t="1734316255094" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5319" width="70" height="70">

                    </svg>
                </template>
            </van-nav-bar>
            <div>
                <div class="bosp">
                    <van-search v-model="search" placeholder="请输入搜索关键词" />
                </div>
            </div>
        </header>
        <main class="mmain">
            <!-- tab切换1 -->
            <van-sidebar v-model="active" @change="hanldeChange" class="tabs">
                <van-sidebar-item v-for="(item, index) in tablist" :key="index" :title="item" class="qiao" />
            </van-sidebar>
            <div class="tablistss">
                <div class="mypay" v-for="(ite, ind) in filterTableData" :key="ind">
                    <div class="immmmg"><img :src="ite.image" alt="" /></div>
                    <div class="text">
                        <div class="text1">
                            <div class="OTC">
                                <span>{{ ite.tag }}</span>
                            </div>
                            <div class="name">
                                <span>
                                    {{ ite.name }}
                                </span>
                            </div>
                        </div>
                        <div class="desc" @click="todetail(ite.shop_spu_id)">
                            适应症：呃呃土工格栅收到股骨头疼发发发巅峰对决尽快撒大声地撒旦撒旦撒旦撒大萨达撒多撒
                        </div>

                    </div>
                </div>
            </div>
        </main>
    </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import axios from "../../utils/index";
import "./index.css";
import { ref, onBeforeMount, computed } from "vue";

const tablist = ref([
    "消化系统",
    "神经系统",
    "五官用药",
    "风湿骨痛",
    "抗病毒类",
    "肿瘤用药",
    "皮肤用药",
    "儿科用药",
    "清热解毒",
    "肝胆用药",
    "泌尿系统",
    "内分泌类",
    "滋补调养",
    "呼吸用药",
    "肠胃净化",
    "维矿物质",
    "精神心理",
    "抗菌消炎",
    "糖尿病类",
    "母婴用药",
]);

const pageCode = ref(0);
const pageSize = ref(10);
// 买药数据模块
const paylist = ref([]);
const detdata1 = ref({});
const detdata2 = ref({});
const detdata3 = ref({});
const imgs = ref([]);
const id = ref(0);
const getlist2 = async () => {
    const res = await axios.get(`/v1/mall/home/shop_spu/content_config/`, {
        params: { cursor: pageCode.value, page_size: pageSize.value },
    });
    paylist.value = res.data.data.content_list;

};
getlist2();
const hanldeChange = (index) => {
    console.log(index);
    pageCode.value = index;
    getlist2();
};

const router = useRouter();
const todetail = (id) => {
    console.log("id", id);
    router.push({ path: "/shopdetail/index.vue", query: { id: id } });
};
const onClickLeft = () => {
    router.push({ path: "/shop" });
};
const getDetail1 = async () => {
    console.log(id.value);

    await axios
        .get(`/v1/mall/shop_spu/specification_info/?shop_spu_id=${id.value}`)
        .then((res) => {
            console.log(res.data.data);
            detdata1.value = res.data.data;
            console.log(detdata1.value, 1);
        });
};
const getDetail2 = async () => {
    console.log(id.value);

    await axios
        .get(`/v1/mall/shop_spu/detail/base/?shop_spu_id=${id.value}`)
        .then((res) => {
            console.log(res.data.data);
            detdata2.value = res.data.data;
            console.log(detdata2.value, 2);
            imgs.value = detdata2.value.swiper_info.img_list;
            console.log(imgs.value);
        });
};
const getDetail3 = async () => {
    console.log(id.value);

    await axios
        .get(`/v1/mall/shop_spu/detail/tail/?shop_spu_id=${id.value}`)
        .then((res) => {
            console.log(res.data.data);
            detdata3.value = res.data.data;
            console.log(detdata3.value, 3);
        });
};

// 加入购物车
const joincart = (item) => {
    id.value = item.shop_spu_id;
    getDetail1();
    getDetail2();
    getDetail3();
    const cartlist = JSON.parse(localStorage.getItem("cartlist")) || [];
    const atlist = cartlist.find((v) => v.shop_spu_id == item.shop_spu_id);
    cartlist.forEach((item, index) => { });
    if (atlist) {
        cartlist.forEach((value, index) => {
            if (value.id == atlist.id) {
                value.num++;
                localStorage.setItem("cartlist", JSON.stringify(cartlist));
                return;
            }
        });
    } else {
        cartlist.unshift({
            id: item.shop_spu_id,
            num: 1,
            price: detdata2.value.goods_info.price,
            title: detdata2.value.goods_info.title,
            img: imgs.value[0],
            state: false,
        });
        localStorage.setItem("cartlist", JSON.stringify(cartlist));
        console.log(cartlist);
    }
    router.push("/cart");
};

// 徽标提示
const prices = ref(0);
prices.value = JSON.parse(localStorage.getItem("cartlist")).length
// 点击购物车跳转到购物车
const toCart = () => {
    router.push('/cart')
}


// 搜索
const search = ref('')

const filterTableData = computed(() =>
    paylist.value.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)

</script>
